<!--
 * @Description: 
 * @version: 
 * @Company: 
 * @Author: GeYang
 * @Date: 2019-01-14 13:02:55
 * @LastEditors: 
 * @LastEditTime: 2019-10-28 18:27:06
 -->
<template>
  <div class="wrapper">
    <!-- <img src="../assets/img/bill.jpg" alt> -->
    <ul>
      <li>
        <div class="picBox">
          <div class="show">
            <img height="320px" width="320px" v-bind:src="rankData[0].url" />
          </div>
          <div class="hide">
            <h3>
              第一名
              共{{rankData[0].ballot}}票
            </h3>
          </div>
        </div>
      </li>
      <li>
        <div class="picBox">
          <div class="show">
            <!-- <img height="320px" width="320px" src="../assets/img/yasuo/program2-2.jpg"> -->
            <img height="320px" width="320px" v-bind:src="rankData[1].url" />
          </div>
          <div class="hide">
            <h3>
              第二名
              共{{rankData[1].ballot}}票
            </h3>
          </div>
        </div>
      </li>
      <li>
        <div class="picBox">
          <div class="show">
            <!-- <img height="320px" width="320px" src="../assets/img/yasuo/program3-3.jpg"> -->
            <img height="320px" width="320px" v-bind:src="rankData[2].url" />
          </div>
          <div class="hide">
            <h3>
              第三名
              共{{rankData[2].ballot}}票
            </h3>
          </div>
        </div>
      </li>
      <li>
        <div class="picBox">
          <div class="show">
            <!-- <img height="320px" width="320px" src="../assets/img/yasuo/program4-4.jpg"> -->
            <img height="320px" width="320px" v-bind:src="rankData[3].url" />
          </div>
          <div class="hide">
            <h3>
              第四名
              共{{rankData[3].ballot}}票
            </h3>
          </div>
        </div>
      </li>
      <li>
        <div class="picBox">
          <div class="show">
            <!-- <img height="320px" width="320px" src="../assets/img/yasuo/program5-5.jpg"> -->
            <img height="320px" width="320px" v-bind:src="rankData[4].url" />
          </div>
          <div class="hide">
            <h3>
              第五名
              共{{rankData[4].ballot}}票
            </h3>
          </div>
        </div>
      </li>
      <li>
        <div class="picBox">
          <div class="show">
            <!-- <img height="320px" width="320px" src="../assets/img/yasuo/program6-6.jpg"> -->
            <img height="320px" width="320px" v-bind:src="rankData[5].url" />
          </div>
          <div class="hide">
            <h3>
              第六名
              共{{rankData[5].ballot}}票
            </h3>
          </div>
        </div>
      </li>
      <li>
        <div class="picBox">
          <div class="show">
            <!-- <img height="320px" width="320px" src="../assets/img/yasuo/program7-7.jpg"> -->
            <img height="320px" width="320px" v-bind:src="rankData[6].url" />
          </div>
          <div class="hide">
            <h3>
              第七名
              共{{rankData[6].ballot}}票
            </h3>
          </div>
        </div>
      </li>
      <li>
        <div class="picBox">
          <div class="show">
            <!-- <img height="320px" width="320px" src="../assets/img/yasuo/program8-8.jpg"> -->
            <img height="320px" width="320px" v-bind:src="rankData[7].url" />
          </div>
          <div class="hide">
            <h3>
              第八名
              共{{rankData[7].ballot}}票
            </h3>
          </div>
        </div>
      </li>
      <li>
        <div class="picBox">
          <div class="show">
            <!-- <img height="320px" width="320px" src="../assets/img/yasuo/program9-9.jpg"> -->
            <img height="320px" width="320px" v-bind:src="rankData[8].url" />
          </div>
          <div class="hide">
            <h3>
              第九名
              共{{rankData[8].ballot}}票
            </h3>
          </div>
        </div>
      </li>
      <li>
        <div class="picBox">
          <div class="show">
            <!-- <img height="320px" width="320px" src="../assets/img/yasuo/program10-10.jpg"> -->
            <img height="320px" width="320px" v-bind:src="rankData[9].url" />
          </div>
          <div class="hide">
            <h3>
              第十名
              共{{rankData[9].ballot}}票
            </h3>
          </div>
        </div>
      </li>
      <li>
        <div class="picBox">
          <div class="show">
            <!-- <img height="320px" width="320px" src="../assets/img/yasuo/program11-11.jpg"> -->
            <img height="320px" width="320px" v-bind:src="rankData[10].url" />
          </div>
          <div class="hide">
            <h3>
              第十一名
              共{{rankData[10].ballot}}票
            </h3>
          </div>
        </div>
      </li>
      <li>
        <div class="picBox">
          <div class="show">
            <!-- <img height="320px" width="320px" src="../assets/img/yasuo/program12-12.jpg"> -->
            <img height="320px" width="320px" v-bind:src="rankData[11].url" />
          </div>
          <div class="hide">
            <h3>
              第十二名
              共{{rankData[11].ballot}}票
            </h3>
          </div>
        </div>
      </li>
      <li>
        <div class="picBox">
          <div class="show">
            <!-- <img height="320px" width="320px" src="../assets/img/yasuo/program13-13.jpg"> -->
            <img height="320px" width="320px" v-bind:src="rankData[12].url" />
          </div>
          <div class="hide">
            <h3>
              第十三名
              共{{rankData[12].ballot}}票
            </h3>
          </div>
        </div>
      </li>
      <li>
        <div class="picBox">
          <div class="show">
            <!-- <img height="320px" width="320px" src="../assets/img/yasuo/program14-14.jpg"> -->
            <img height="320px" width="320px" v-bind:src="rankData[13].url" />
          </div>
          <div class="hide">
            <h3>
              第十四名
              共{{rankData[13].ballot}}票
            </h3>
          </div>
        </div>
      </li>
      <!-- <li>
        <div class="picBox">
          <div class="show">
            <img height="320px" width="320px" src="../assets/img/pic3-3.png">
          </div>
          <div class="hide">
            <h3>
              第十五名
              共{{rankData[14].ballot}}票
            </h3>
          </div>
        </div>
      </li>
      <li>
        <div class="picBox">
          <div class="show">
            <img height="320px" width="320px" src="../assets/img/pic3-4.png">
          </div>
          <div class="hide">
            <h3>
              第十六名
              共{{rankData[15].ballot}}票
            </h3>
          </div>
        </div>
      </li>-->
    </ul>
  </div>
</template>
<script>
import jQuery from "jquery";
import { getRank } from "../api/nianhui.js";
export default {
  data() {
    return {
      rankData: [
        {
          program: "",
          ballot: "",
          rank: "1",
          url: "./img/yasuo/program1-1.jpg"
        },
        {
          program: "",
          ballot: "",
          rank: "1",
          url: "./img/yasuo/program1-1.jpg"
        },
        {
          program: "",
          ballot: "",
          rank: "1",
          url: "./img/yasuo/program1-1.jpg"
        },
        {
          program: "",
          ballot: "",
          rank: "1",
          url: "./img/yasuo/program1-1.jpg"
        },
        {
          program: "",
          ballot: "",
          rank: "1",
          url: "./img/yasuo/program1-1.jpg"
        },
        {
          program: "",
          ballot: "",
          rank: "1",
          url: "./img/yasuo/program1-1.jpg"
        },
        {
          program: "",
          ballot: "",
          rank: "1",
          url: "./img/yasuo/program1-1.jpg"
        },
        {
          program: "",
          ballot: "",
          rank: "1",
          url: "./img/yasuo/program1-1.jpg"
        },
        {
          program: "",
          ballot: "",
          rank: "1",
          url: "./img/yasuo/program1-1.jpg"
        },
        {
          program: "",
          ballot: "",
          rank: "1",
          url: "./img/yasuo/program1-1.jpg"
        },
        {
          program: "",
          ballot: "",
          rank: "1",
          url: "./img/yasuo/program1-1.jpg"
        },
        {
          program: "",
          ballot: "",
          rank: "1",
          url: "./img/yasuo/program1-1.jpg"
        },
        {
          program: "",
          ballot: "",
          rank: "1",
          url: "./img/yasuo/program1-1.jpg"
        },
        {
          program: "",
          ballot: "",
          rank: "1",
          url: "./img/yasuo/program1-1.jpg"
        },
        {
          program: "",
          ballot: "",
          rank: "1",
          url: "./img/yasuo/program1-1.jpg"
        },
        {
          program: "",
          ballot: "",
          rank: "1",
          url: "./img/yasuo/program1-1.jpg"
        }
      ],
      src: []
    };
  },
  methods: {
    getData() {
      getRank().then(res => {
        if (res) {
          this.rankData = res.msg;
        } else {
          this.rankData = null;
          this.$message.error("暂无投票数据");
        }
      });
    }
  },
  mounted() {
    console.log(jQuery("li"));
    function Index(node) {
      this.node = node;
      this.init();
    }
    Index.prototype.init = function() {
      var self = this;
      this.nodes = [];
      Array.prototype.slice.call(self.node, 0).forEach(function(item, index) {
        self.nodes.push(self.update(item));
        self.bindEvents(item, index);
      });
    };
    Index.prototype.update = function(item) {
      return {
        w: item.offsetWidth,
        h: item.offsetHeight,
        l: item.offsetLeft,
        t: item.offsetTop
      };
    };
    Index.prototype.bindEvents = function(item, index) {
      var self = this;
      // jQuery(item).on("mouseenter", function(e) {
      //   self.addClass(e, item, "in", index);
      //   return false;
      // });
      // jQuery(item).on("mouseleave", function(e) {
      //   self.addClass(e, item, "out", index);
      //   return false;
      // });
      jQuery(item).on("click", function(e) {
        self.addClass(e, item, "out", index);
        return false;
      });
    };
    Index.prototype.addClass = function(e, item, state, index) {
      var direction = this.getDirection(e, index);
      var class_suffix = "";
      switch (direction) {
        case 0:
          class_suffix = "-top";
          break;
        case 1:
          class_suffix = "-right";
          break;
        case 2:
          class_suffix = "-bottom";
          break;
        case 3:
          class_suffix = "-left";
          break;
      }
      item.className = "";
      item.classList.add(state + class_suffix);
    };
    Index.prototype.getDirection = function(e, index) {
      var w = this.nodes[index].w,
        h = this.nodes[index].h,
        x = e.pageX - this.nodes[index].l - w / 2,
        y = e.pageY - this.nodes[index].t - h / 2;
      // 取到x,y两点坐标
      console.log(w, h, x, y);
      var d =
        (Math.round((Math.atan2(y, x) * (180 / Math.PI) + 180) / 90) + 3) % 4;

      return d; //d的数值用于判断方向上下左右。
    };
    new Index(jQuery("li"));
    this.getData();
  }
};
</script>
<style>
* {
  margin: 0;
}

/* body {
  background-color: #2f2f2f;
} */

.wrapper {
  max-width: 100%;
  margin: 80px auto;
  /* background: url("../assets/img/bill.jpg"); */
}

.wrapper li {
  position: relative;
  width: 320px;
  height: 320px;
  list-style: none;
  margin: 5px;
  display: inline-block;
  perspective: 300px;
}

.picBox {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 50% -90px;
  animation: 200ms ease-out 0ms 1 normal forwards;
}

.show,
.hide {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.hide {
  color: #fff;
  background-color: #000;
  text-align: center;
  line-height: 180px;
  /* transform: translate3d(0, 0, -1px); */
  /* 3D空间内移动一个元素的位置 */
}

.show {
  transform: translate3d(1, 1, -1px);
}

.in-top .hide,
.out-top .hide {
  transform-origin: 0% 100%;
  transform: translate3d(0, -100%, 0) rotate3d(1, 0, 0, 90deg);
}

.in-top .picBox {
  animation-name: in-top;
  animation-play-state: running;
}

.out-top .picBox {
  animation-name: out-top;
  animation-play-state: running;
}

@keyframes in-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }

  to {
    transform: rotate3d(0, -1, 0, 90deg);
  }
}

/* @keyframes out-top {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }

  to {
    transform: rotate3d(-1, 0, 0, 90deg);
  }
} */

@keyframes out-top {
  from {
    transform: rotate3d(-1, 0, 0, 90deg);
  }

  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}

.in-right .hide,
.out-right .hide {
  transform-origin: 0% 0%;
  transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, 90deg);
}

.in-right .picBox {
  animation-name: in-right;
  animation-play-state: running;
}

.out-right .picBox {
  animation-name: out-right;
  animation-play-state: running;
}

@keyframes in-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }

  to {
    transform: rotate3d(0, -1, 0, 90deg);
  }
}

/* @keyframes out-right {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }

  to {
    transform: rotate3d(0, -1, 0, 90deg);
  }
} */

@keyframes out-right {
  from {
    transform: rotate3d(0, -1, 0, 90deg);
  }

  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}

.in-bottom .hide,
.out-bottom .hide {
  transform-origin: 0% 0%;
  transform: translate3d(0, 100%, 0) rotate3d(-1, 0, 0, 90deg);
}

.in-bottom .picBox {
  animation-name: in-bottom;
  animation-play-state: running;
}

.out-bottom .picBox {
  animation-name: out-bottom;
  animation-play-state: running;
}

@keyframes in-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }

  to {
    transform: rotate3d(1, 0, 0, 90deg);
  }
}

/* @keyframes out-bottom {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }

  to {
    transform: rotate3d(1, 0, 0, 90deg);
  }
} */

@keyframes out-bottom {
  from {
    transform: rotate3d(1, 0, 0, 90deg);
  }

  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}

.in-left .hide,
.out-left .hide {
  transform-origin: 100% 0;
  transform: translate3d(-100%, 0, 0) rotate3d(0, -1, 0, 90deg);
}

@keyframes in-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }

  to {
    transform: rotate3d(0, 1, 0, 90deg);
  }
}

/* @keyframes out-left {
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }

  to {
    transform: rotate3d(0, 1, 0, 90deg);
  }
} */

@keyframes out-left {
  from {
    transform: rotate3d(0, 1, 0, 90deg);
  }

  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}

.in-left .picBox {
  animation-name: in-left;
  animation-play-state: running;
}

.out-left .picBox {
  animation-name: out-left;
  animation-play-state: running;
}
</style>
